<template>
  <!--业主账单详情-->
  <view class="app-container bill-detail-page">
    <view class="content">
      <view class="bill-status">
        <dict-tag :options="dict.type.pay_state" :value="bill.payState"/>
      </view>
      <view class="bill-info">
        <view class="item">
          <text class="label">金额</text>
          <text class="value">¥{{ bill.cost }}</text>
        </view>
        <view class="item">
          <text class="label">房间</text>
          <text class="value">{{ bill.premisesAddress || '' }}</text>
        </view>
        <view class="item">
          <text class="label">最晚付款日期</text>
          <text class="value">{{ truncateDate(bill.latestPayTime) }}</text>
        </view>
        <view class="item" v-if="bill.payMethod">
          <text class="label">支付方式</text>
          <text class="value">{{payMethodText(bill.payMethod)}}</text>
        </view>
        <view class="item" v-if="bill.payMethod === '1'">
          <text class="label">支付时间</text>
          <text class="value">{{bill.payTime || '-'}}</text>
        </view>
      </view>
    </view>
    <!--1:待支付 3:逾期-->
    <view class="footer" v-if="item.payState === '1' || item.payState === '3'">
      <view class="amount">
        <text class="unit">¥</text>
        <text class="value">{{ bill.cost }}</text>
      </view>
      <view class="btns">
        <u-button color="#FF7947" text="支付" shape="circle" @click="handlePay(bill.proprietorBillId)"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {ownerBillDetail} from "@/api/mine/owner";
import {truncateDate} from "@/utils/common";

export default {
  dicts: ['pay_state'],
  data() {
    return {
      proprietorBillId: null,
      bill: {}
    };
  },
  onLoad(option) {
    // 账单id
    this.proprietorBillId = option.id;
    this.getOwnerBillDetail(option.id)
  },
  computed: {
    payMethodText() {
      return (value) => {
        let obj = [{ value: 1, label: '线上支付' }, { value: 2, label: '线下处理' }].find(item => item.value == value)
        return obj ? obj.label : ''
      }
    }
  },
  methods: {
    truncateDate,
    getOwnerBillDetail(billId) {
      ownerBillDetail(billId).then(res => {
        this.bill = res.data;
      })
    },
    handlePay(billId) {
      this.$tab.navigateTo('/pages/mine/owner/owner-bill/pay?id=' + billId)
    }

  }
}
</script>

<style lang="scss" scoped>
.bill-detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;

  .content {
    flex: 1;
    padding: 16rpx;

    .bill-status {
      font-size: 32rpx;
      margin-bottom: 20rpx;
      font-weight: bold;
      padding: 16rpx;
    }

    .bill-info {
      background-color: #fff;
      padding: 16rpx;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;

        .label {
          font-size: 16px;
          color: #666;
        }

        .value {
          font-size: 16px;
          color: #333;
        }
      }
    }

    .bill-items {
      margin-top: 16rpx;
      background-color: #fff;
      padding: 16rpx;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .header {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;

      }

      .bill-item {
        .item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16rpx;

          .label {
            font-size: 16px;
            color: #666;
          }

          .value {
            font-size: 16px;
            color: #333;
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e0e0e0;
    padding: 16rpx 16px env(safe-area-inset-bottom) 16rpx;

    .amount {
      flex: 1;
      display: flex;
      align-items: center;
      margin-right: 16px;
      color: #FF7947;
      margin-left: 20rpx;

      .unit {
        font-size: 16px;
      }

      .value {
        font-size: 48rpx;
        margin-left: 12rpx;
      }
    }

    .btns {
      width: 300rpx;
      display: flex;
      // 水平居中
      justify-content: center;
    }
  }
}


</style>